<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>自定义style</title>
    <script src="js/vue.js"></script>
    <style>
        p {
            padding: 20px;
            border: 1px dashed #999;
        }

        label {
            padding: 0 10px;
        }
    </style>
</head>

<body>
    <div id='app'>
        <!-- 字号选择 -->
        <label>字号：</label>
        <select v-model="fontSize">
            <option v-for="i in 15" :value="`${i + 11}px`">{{ i + 11 }}px</option>
        </select>
        <!-- 字体选择 -->
        <label>字体：</label>
        <select v-model="fontFamily">
            <option value="Microsoft YaHei">微软雅黑</option>
            <option value="SimSun">宋体</option>
            <option value="SimHei">黑体</option>
            <option value="KaiTi">楷体</option>
        </select>
        <!-- 颜色选择 -->
        <label>颜色：</label>
        <input type="color" v-model="color">
        <!-- 字重选择 -->
        <label>字重：</label>
        <select v-model="fontWeight">
            <option v-for="i in 9" :value="i * 100">{{ i * 100 }}</option>
        </select>
        <!-- 行间距输入 -->
        <label>行间距：</label>
        <input type="number" v-model="lineHeight" style="width: 50px;"> px
        <!-- 字间距输入 -->
        <label>字间距：</label>
        <input type="number" v-model="letterSpacing" style="width: 50px;"> px
        <!-- 首行缩进输入 -->
        <label>首行缩进：</label>
        <input type="number" v-model="textIndent" style="width: 50px;"> em
        <!-- 段落文字 -->
        <p :style="{
            fontSize: fontSize,
            fontFamily: fontFamily,
            color: color,
            fontWeight: fontWeight,
            lineHeight: lineHeight + 'px',
            letterSpacing: letterSpacing + 'px',
            textIndent: textIndent + 'em'
        }">
            那是一个阳光明媚的清晨，我站在车站的候车室里，心中满是对即将开始的旅程的期待。然而，我的目光却被不远处的一个身影深深吸引。那是一位父亲，他正送自己的儿子踏上远行的列车。

            父亲穿着一件深色的外套，岁月在他的脸上刻下了深深的痕迹，但他的眼神中却透着一种坚定和温柔。儿子背着一个大大的行囊，显得有些笨拙，父亲则紧紧地跟在后面，不时地叮嘱着什么。我虽然听不到他们的对话，但从儿子微微点头的动作中，我能感受到那份浓浓的父爱。

            列车即将进站，父亲停下脚步，从口袋里掏出一张皱巴巴的手帕，仔细地擦拭着儿子额头上的汗珠。儿子抬起头，望着父亲，眼中闪过一丝不舍。父亲微微一笑，拍了拍儿子的肩膀，仿佛在说：“别担心，我会在这里等你回来。”那一刻，阳光洒在父亲的脸上，他的笑容温暖而明亮，如同一盏灯，照亮了儿子前行的道路。

            列车缓缓驶入站台，儿子转身走向车厢，父亲则站在原地，目送着他。儿子走进车厢，回头望了一眼父亲，父亲也立刻回应，用力地挥了挥手。列车开始启动，父亲的身影逐渐变得模糊，但他依然站在那里，直到列车消失在远方。

            我站在一旁，望着父亲那渐渐远去的背影，心中涌起一股莫名的感动。那背影，是父亲对儿子深深的牵挂，是无声的爱与支持。它让我想起了自己的父亲，想起了那些他为我默默付出的日子。父亲总是不善言辞，但他用行动告诉我，他的爱从未缺席。

            在人生的道路上，我们或许会遇到各种困难和挑战，但只要想起那个温暖的背影，我们就会充满力量。
        </p>
    </div>
    <script>
        const app = Vue.createApp({
            data() {
                return {
                    // 初始化字号
                    fontSize: '16px',
                    // 初始化字体
                    fontFamily: 'Microsoft YaHei',
                    // 初始化颜色
                    color: '#000000',
                    // 初始化字重
                    fontWeight: '400',
                    // 初始化行间距
                    lineHeight: 20,
                    // 初始化字间距
                    letterSpacing: 0,
                    // 初始化首行缩进
                    textIndent: 2
                };
            }
        });
        // 挂载Vue实例
        app.mount("#app");
    </script>
</body>

</html>